<template>
	<view class="platDetaList-warp">
		<view class="plat-item">
			<view class="plat-item-menu" :class="drawerIsShow?'menu-animation':'menu-animation-return'">
				<u-navbar id="navbardom" :is-fixed="false" :is-back="false" :border-bottom="false"
					:background="{ background: '#ffffff' }"></u-navbar>
			</view>

			<view class="plat-item-list" :class="drawerIsShow?'drawer-animation':'drawer-animation-return'">
				<u-navbar id="navbardom" :is-fixed="!navIsFixed?true:false" :is-back="false" :border-bottom="false"
					:background="{ background: '#ffffff' }">
					<view class="slot-wrap list-nav">
						<!-- <u-icon name="arrow-left" size="40" style="margin: 0 0 0 10upx;" @click="returnPage"></u-icon> -->
						<text>板块列表</text>
					</view>
				</u-navbar>
				<button @click="openDrawer">打开抽屉</button>
			</view>

			<view class="plat-item-mask" :class="drawerIsShow?'mask-animation':'mask-animation-return'"
				@click="returnList">
				<view class="return-icon">
					<u-icon name="arrow-rightward" size="30"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				drawerIsShow: false,
				navIsFixed: false
			};
		},
		components: {

		},
		onLoad() {},
		computed: {},
		methods: {
			openDrawer() {
				this.drawerIsShow = true
				this.navIsFixed = true
				debugger
			},
			returnList() {
				this.drawerIsShow = false
				setTimeout(() => { //400毫秒后让导航固定 防止导航瞬间移动
					this.navIsFixed = false
				}, 400)
				debugger
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
		height: 100%;
	}

	.platDetaList-warp {
		// background-color: #f1f1f1;
		height: 100%;
		width: 100%;
		overflow: hidden;

		.plat-item {
			position: relative;
			width: 100%;
			height: 100%;

			&-menu {
				position: absolute;
				left: -100%;
				top: 0;
				width: 78%;
				background-color: #ffffff;
				height: 100%;
			}

			.menu-animation {
				animation: menuMove 0.4s ease-in-out alternate forwards;
			}

			@keyframes menuMove {
				0% {
					left: -100%;
					top: 100upx;
				}

				100% {
					left: 0;
					top: 0;
				}
			}

			.menu-animation-return {
				animation: menuMoveReturn 0.2s ease-in-out alternate forwards;
			}

			@keyframes menuMoveReturn {
				0% {
					left: 0;
					top: 0;
				}

				100% {
					left: -100%;
					top: 100upx;
				}
			}


			&-list {
				position: absolute;
				right: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: #ffffff;
				overflow: auto;

				button {
					width: 50%;
				}
			}

			.drawer-animation {
				animation: drawerMove 0.3s ease-in-out alternate forwards;
			}

			@keyframes drawerMove {
				0% {
					right: 0;
					top: 0;
				}

				100% {
					right: -83%;
					top: 60upx;
				}
			}

			.drawer-animation-return {
				animation: drawerMoveReturn 0.4s ease-in-out alternate forwards;
			}

			@keyframes drawerMoveReturn {
				0% {
					right: -83%;
					top: 60upx;
				}

				100% {
					right: 0;
					top: 0;
				}
			}


			&-mask {
				position: absolute;
				right: -100%;
				top: 0;
				height: 100%;
				width: 17%;
				background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));

				.return-icon {
					position: absolute;
					bottom: 100upx;
					left: 30%;
					border: 4upx solid #ffffff;
					border-radius: 50%;
					width: 70upx;
					height: 70upx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #ffffff;
				}
			}

			.mask-animation {
				animation: maskMove 0.3s ease-in-out alternate forwards;
			}

			@keyframes maskMove {
				0% {
					right: -100%;
					opacity: 0;
				}

				100% {
					right: 0;
					opacity: 1;
				}
			}

			.mask-animation-return {
				animation: maskMoveReturn 0.1s ease-in-out alternate forwards;
			}

			@keyframes maskMoveReturn {
				0% {
					right: 0;
					opacity: 1;
				}

				100% {
					right: -100%;
					opacity: 0;
				}
			}
		}

		.list-nav {
			display: flex;
			align-items: center;

			text {
				padding: 0 0 0 14upx;
				font-size: 32upx;
			}

		}
	}
</style>
